<template>
  <div class="m-picker-item" >
    <div class="m-scroller-indicator"></div>
    <div class="m-scroller-mask" @touchstart="start" @touchend="end" @touchmove="move"></div>
    <div  class="m-scroller-item-box" :style="domStyle" >

      <div v-for="(i,k) in d" :key="k" class="m-scroller-item">{{i}}</div>
    </div>

  </div>
</template>

<script>
    var putil ={
        add(a, b) {

            var c, d, e;
            try {
                c = a.toString().split(".")[1].length;
            } catch (f) {
                c = 0;
            }
            try {
                d = b.toString().split(".")[1].length;
            } catch (f) {
                d = 0;
            }
            return e = Math.pow(10, Math.max(c, d)), (this.mul(a, e) + this.mul(b, e)) / e;
        },
        sub(a, b) {

            var c, d, e;
            try {
                c = a.toString().split(".")[1].length;
            } catch (f) {
                c = 0;
            }
            try {
                d = b.toString().split(".")[1].length;
            } catch (f) {
                d = 0;
            }
            return e = Math.pow(10, Math.max(c, d)), (this.mul(a, e) - this.mul(b, e)) / e;
        },
        mul(a, b) {
            var c = 0,
                d = a.toString(),
                e = b.toString();
            try {
                c += d.split(".")[1].length;
            } catch (f) {}
            try {
                c += e.split(".")[1].length;
            } catch (f) {}
            return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
        },
        div(a, b) {

            var c, d, e = 0,
                f = 0;
            try {
                e = a.toString().split(".")[1].length;
            } catch (g) {}
            try {
                f = b.toString().split(".")[1].length;
            } catch (g) {}
            return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), this.mul(c / d, Math.pow(10, f - e));
        },
        // 取余
        rem(a, b) {

            return this.sub(a , this.mul( parseInt(this.div(a,b)),b))
        }
    }
    export default {
        data () {
            return {
                startY:'', //touch start Y
                endY:'', //touch end Y
                lastPoint:[],
                value:'',
                dY:0,
                itemKey:0,//第几个值
                changeY:'', //sY - eY
                domStyle:{'transform':'translate3d(0,0,0)' }
            }
        },
        computed:{
            itemHeight(){
                return (+window.getComputedStyle(document.querySelector('.m-scroller-item')).height.replace('px','')).toFixed(2);
            },
            //选项长度
            itemLen(){
                return this.d.length
            }
        },
        mounted(){
            //初始化，定位第一个
            if(this.val){
                this.moveTo(this.val);
            }else{
                this.dY = putil.mul(this.itemHeight,1);//设置上下显示个数

                this.domStyle =  this.style =  {
                    transform:'translate3d(0px, '+this.dY+'px, 0px)'
                }
            }

        },
        methods:{
            scroll(y,t){
                //根据选项高度判断定在哪个位置
                //  y = y -y%this.itemHeight +(y%this.itemHeight>this.itemHeight/2?this.itemHeight:0)

                let cTop = putil.rem(y,this.itemHeight) > putil.div(this.itemHeight,2) ? this.itemHeight : 0;
                y = putil.add(putil.sub(y , putil.rem(y,this.itemHeight)) , cTop);

                //最大最小情况的判断
                if(y > putil.mul(this.itemHeight,1)){//设置上下显示个数
                    y = putil.mul(this.itemHeight,1)//设置上下显示个数
                }
                let sT = putil.mul((2-this.itemLen),this.itemHeight);
                if(y < sT){
                    y = sT
                }

                this.dY = y;  //记录现在的位置

                this.itemKey = putil.div(putil.sub(putil.mul(this.itemHeight,1),y),this.itemHeight) //第几个值 //设置上下显示个数
                // console.log(t);
                this.domStyle =  this.style =  {
                    transform:'translate3d(0px, '+y+'px, 0px)',
                    transition:"all " + t + "s cubic-bezier(0.1, 0.85, 0.25, 1) 0s"
                }
                //停止后的回调
                this.change(this.d[this.itemKey],this.itemKey,this.selType)
            },
            start(e){
                this.startY = e.touches[0].pageY;
                this.domStyle =  this.style =  {
                    transform:'translate3d(0px, '+ this.dY+'px, 0px)',
                    transition:"none"
                }
            },
            end(e){
                this.endY = e.changedTouches[0].pageY;
                //非线性衰减
                let  t = parseInt(Math.sqrt(Math.abs(this.endY - this.startY))) / 10;
                // console.log(t);
                this.scroll(this.dY+this.endY-this.startY,t);
            },
            move(e){
                e.preventDefault();
                let dY = e.touches[0].pageY - this.startY;    //差值
                //反映差值
                this.domStyle = {
                    transform:'translate3d(0px, '+(dY+this.dY)+'px, 0px)',
                }

            },
            moveTo(val){
                if(this.selType=="month"||this.selType=="day"){
                    //  this.itemKey = +this.val -1;
                    this.itemKey = 0;
                    this.d.map( (v,k) =>{
                        // console.log(v)
                        if(v.match(/\d*/g)[0]==val){
                            this.itemKey = k
                        }
                    })

                }else if(this.selType=="year"){
                    this.itemKey = 0;
                    this.d.map( (v,k) =>{
                        if(v.match(/\d*/g)[0]==val){
                            this.itemKey = k
                        }
                    })

                }else{  // 日期外的 如果后面需要做成其他类型
                    this.itemKey = 0;
                    this.d.map( (v,k) =>{
                        if(v==val){
                            this.itemKey = k
                        }
                    })
                }
                this.dY =  putil.mul((1-this.itemKey),this.itemHeight);//设置上下显示个数
                this.scroll(this.dY,0)
            }
        },
        watch:{
            d(){
                if(this.itemKey+1>this.d.length){
                    this.itemKey = this.d.length;
                    this.dY =  putil.mul((1-this.itemKey),this.itemHeight);//设置上下显示个数
                    this.scroll(this.dY,0.4)
                }
                if(this.selType=="month" || this.selType=="day"){
                    this.d.map( (v,k) =>{
                        if(v.match(/\d*/g)[0]==this.val){
                            this.itemKey = k
                        }
                    })
                    this.dY =  putil.mul((1-this.itemKey),this.itemHeight);//设置上下显示个数
                    this.scroll(this.dY,0.4)
                    // console.log(this.itemKey,this.val);
                }

            }
        },
        props:{
            change:{

            },
            val:{

            },
            selType:{

            },
            d:{
                default:function () {
                    return []
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  .m-picker-item{
    position: relative;
    width: 100%;
    height: px2rem(300px);
    overflow: hidden;
  .m-scroller-item-box{
    position: relative;
    width: 100%;
  }
  .m-scroller-item{
    text-align: center;
    font-size: px2rem(48px);
    height:px2rem(100px);
    line-height: px2rem(100px);
    color: #2aa2aa;
  }
  .m-scroller-mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    z-index: 3;
    background-image:
            linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.6)),
            linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
    background-position: top, bottom;
    background-size: 100% px2rem(100px);;
    background-repeat: no-repeat;
  }
  .m-scroller-indicator {
    width: 100%;
    height:px2rem(100px);
    position: absolute;
    left: 0;
    top:px2rem(100px);
    z-index: 0;
    box-sizing: border-box;
  /*  background-image: linear-gradient(to bottom, #E6F4F5, #E6F4F5, transparent, transparent), linear-gradient(to top, #E6F4F5, #E6F4F5, transparent, transparent);
    background-position: top, bottom;
    background-size: 100% 3px;*/
    background-repeat: no-repeat;
    background: #E6F4F5;
  }
  }
</style>
